<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>无缝轮播</title>
		<style>
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			.banber{
				margin: 100px auto; border: 5px solid red; width: 730px;height: 454px;
			    position:relative ;
			    overflow: hidden;
			}
			.banber:hover .btn{
				display: block;
			}
			.banber .img{
				width: 5000px;
				position: absolute;
				left: 0px;
				top: 0;
			}
			.banber .img li{
				float: left;
				
			}
			.banber .num{
				position: absolute;
				width: 100%;
				text-align: center;
				bottom: 10px;
				left: 0;
				font-size: 0;
			}
			.banber .num li{
				width: 10px;
				height: 10px;
				font-size: 5px;
				cursor: pointer;
				margin: 0 10px;
				background: #888;
				text-align: center;
				display: inline-block;
				line-height: 10px;
				border-radius: 50%;
				color: aliceblue;
			}
			.banber .num li.on{
				background: #f60;
			}
			.banber .btn{
				display: none;
				width: 30px;
				cursor: pointer;
				height: 50px;
				color: #fff;
				font-size: 40px;
				background-color: rgba(0,0,0,0.5);
				position: absolute;
				top: 50%;
				line-height: 50px;
				text-align: center;
				margin-top: -25px;
			}
			.banber .btn_left{
				left: 0;
			}
			.banber .btn_right{
				right: 0;
			}
		</style>
	 <script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
	 
	</head>
	<body>
		<div class="banber">
			  <ul class="img">
			  	<li ><a href=""><img src="img/1.jpg" alt="" /></a></li>
			  	<li><a href=""><img src="img/2.jpg" alt="" /></a></li>
			  	<li><a href=""><img src="img/3.jpg" alt="" /></a></li>
			  	<li><a href=""><img src="img/4.jpg" alt="" /></a></li>
			  </ul>
			  <ul class="num">
			  	
			  </ul>
			  <div class="btn btn_left">
			  	&lt;
			  </div>
			   <div class="btn btn_right">
			  	&gt;
			  </div>
		</div>
	</body>
<script>
	$(function(){
		var i = 0
		var clone = $('.banber .img li').first().clone();
		$('.banber .img').append(clone)
	
		var size = $('.banber .img li').size()
	    for(var j = 0;j<size-1;j++){
	    	 $('.banber .num ').append("<li></li>")
	    }
		
	    $('.banber .num li').first().addClass('on')	
	    $('.banber .num li').hover(function(){
	    	var idnex = $(this).index();
	    	i = idnex
	    	$(this).addClass('on').siblings().removeClass('on')
	 		$('.img').stop().animate({left:730*-idnex},500)
	    	
	    })
	    var t = setInterval(function(){
	    	i++;
	    	move()
	    },2000)
	    $('.banber').hover(function(){
	    	clearInterval(t)
	    },function(){
	    	t = setInterval(function(){
	    	i++;
	    	move()
	    },2000)
	    })
	 	$('.btn_left').click(function(){
	 		i++
		 	move()
	 	}) 
	  $('.btn_right').click(function(){
	 	i--
	 	move()
	 
	 })
	 function move (){
	 	if(i == size){
	 		$('.banber .img').css({left:0})
	 	    	i =1
	 	}
	 	if(i == -1){
	 		$('.banber .img').css({left:-730*(size - 1)})
	 		 i = size -2
	 	}
	   if(i==size -1){
	   		$('.banber .num li').eq(0).addClass('on').siblings().removeClass('on')
	   }else{
	   		$('.banber .num li').eq(i).addClass('on').siblings().removeClass('on')
	   }
	 	
	 	$('.img').stop().animate({left:-730*i},500)
 	}
	})
</script>
</html>
